<template>
  <div class="container">
    <map-box ref="mapBoxRef" @marker-clicked="handleMarkerClick"></map-box>
    <div class="topLine">
      <div class="left">
        <router-link to="/explore">RETURN</router-link>
        <div class="navigator">
          <img src="@/assets/images/navigator.png" alt="" />
        </div>
      </div>
      <div class="center">杨鹏程/YANG PENGCHENG</div>
      <div class="RIGHT">THE PLANTS AROUND ME</div>
    </div>
    <!-- <div class="mask" @click="closeWindow" :class="{ show: showWindow }"></div> -->


    <!-- 当 mapindex == 7时 执行下面这段逻辑 -->

    <!-- 第一个光点的图片集合 mapindex==7 -->
    <!-- mapindex==7  的时候 代表点了第一个光点  点了第一个光点淡入第一张图片  鼠标点击屏幕 淡入第二张图片  鼠标点击屏幕淡入第三张图片 以此类推 鼠标点击屏幕淡入第8张 到第8张的时候 点击屏幕又回到第一张循环 除非属于第一个光点的第一段音频结束 就显示详情页-->
    <div class="tuboxs" :class="{ show: mapindex == 7 }">
      <!-- 第一张图片 -->
      <div class="imgtuboxs">
        <!-- <div class="bagss" style="background-image: '@/assets/images/left/1.jpg'"></div> -->
        <div class="centerov"> <img class="tuimgs" style="width:320px;height:330px;left:50px;top:50px;"
            src="@/assets/images/left/7/1.png" />
        </div>
      </div>
      <!-- 第三张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:303px;height:356px;left:50px;top:50px;"
            src="@/assets/images/left/7/2.png" />
        </div>
      </div>
      <!-- 第四张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:350px;height:340px;left:50px;top:50px;"
            src="@/assets/images/left/7/3.png" />
        </div>
      </div>
      <!-- 第五张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:322px;height:332px;left:50px;top:50px;"
            src="@/assets/images/left/7/4.png" />
        </div>
      </div>
      <!-- 第六张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:340px;height:360px;left:50px;top:50px;"
            src="@/assets/images/left/7/5.png" />
        </div>
      </div>
      <!-- 第七张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:370px;height:390px;left:50px;top:50px;"
            src="@/assets/images/left/7/6.png" />
        </div>
      </div>
      <!-- 第八张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:304px;height:305px;left:50px;top:50px;"
            src="@/assets/images/left/7/7.png" />
        </div>
      </div>
      <!-- 详情图 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:302px;height:311px;left:50px;top:50px;"
            src="@/assets/images/left/7/8.png" />
        </div>
      </div>


      <div class="wenzi">
        <!-- 第一段音频 显示的音频里面文字  比如音频播放时间到 0：04-0：17  的时候 音频里面说 有人到宿舍里叫我们快跑 那么下面就显示这段文字  文字随着音频的时间 淡入显示  淡入的同时 把上一段文字淡出隐藏-->
        <!-- 0：04 - 0：17 -->
        <text>有人到宿舍里叫我们快跑</text>
        <!--   0：36-0：40 -->
        <text>化肥的味,哎呀熏死了</text>
        <!--   0：44-0：47 -->
        <text>我们楼下的味道太大了</text>
        <!--   1：01-1：04 -->
        <text>跑出去了才知道</text>
        <!--    1：06-1：09-->
        <text>跑出来几十个</text>
        <!--  1：10-1：13-->
        <text>有个老头跑出来叫我们</text>
        <!--   1：16-1：21-->
        <text>那老头自己牺牲了</text>
        <!--    1：22-1：28-->
        <text>老头不知道是哪里人</text>
        <!--    1：31-1：36-->
        <text>就是那老头救了我们</text>
        <!--   1：31-1：34-->
        <text>叫我们快跑,里面漏气</text>
        <!--  1：38-1：43-->
        <text>不然他自己早跑了</text>
        <!-- 1：55-1：59-->
        <text>要是我们跑得慢小命都没了</text>
        <!--   2：04-2：08-->
        <text>老人也在里面打工</text>
        <!--   2：10-2：13-->
        <text>五六十岁吧</text>
      </div>
    </div>


    <!-- 第一个光点的图片集合 mapindex==8 执行下面这段逻辑-->
    <!-- mapindex==8  的时候 代表点了第一个光点  点了第一个光点淡入第一张图片  鼠标点击屏幕 淡入第二张图片  鼠标点击屏幕淡入第三张图片 以此类推 鼠标点击屏幕淡入第7张 到第7张的时候 点击屏幕又回到第一张循环 除非属于第一个光点的第一段音频结束 就显示详情页-->
    <div class="tuboxs" :class="{ show: mapindex == 7 }">
      <!-- 第一张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:320px;height:300px;left:50px;top:50px;"
            src="@/assets/images/left/8/1.png" />
        </div>
      </div>
      <!-- 第三张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:303px;height:300px;left:50px;top:50px;"
            src="@/assets/images/left/8/2.png" />
        </div>
      </div>
      <!-- 第四张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:306px;height:300px;left:50px;top:50px;"
            src="@/assets/images/left/8/3.png" />
        </div>
      </div>
      <!-- 第五张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:350px;height:300px;left:50px;top:50px;"
            src="@/assets/images/left/8/4.png" />
        </div>
      </div>
      <!-- 第六张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:360px;height:300px;left:50px;top:50px;"
            src="@/assets/images/left/8/5.png" />
        </div>
      </div>
      <!-- 第七张图片 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:370px;height:300px;left:50px;top:50px;"
            src="@/assets/images/left/8/6.png" />
        </div>
      </div>
      <!-- 详情图 -->
      <div class="imgtuboxs">
        <div class="centerov"> <img class="tuimgs" style="width:390px;height:300px;left:50px;top:50px;"
            src="@/assets/images/left/8/7.png" />
        </div>
      </div>
      <div class="wenzi">
        <!-- 第一段音频 显示的音频里面文字  比如音频播放时间到 0：04-0：17 的时候 音频里面说 有人到宿舍里叫我们快跑 那么下面就显示这段文字  文字随着音频的时间 淡入显示  淡入的同时 把上一段文字淡出隐藏-->
        <!-- 0：04 - 0：17 -->
        <text>有人到宿舍里叫我们快跑</text>
        <!--   0：36-0：40 -->
        <text>化肥的味,哎呀熏死了</text>
        <!--   0：44-0：47 -->
        <text>我们楼下的味道太大了</text>
        <!--   1：01-1：04 -->
        <text>跑出去了才知道</text>
        <!--    1：06-1：09-->
        <text>跑出来几十个</text>
        <!--  1：10-1：13-->
        <text>有个老头跑出来叫我们</text>
        <!--   1：16-1：21-->
        <text>那老头自己牺牲了</text>
        <!--    1：22-1：28-->
        <text>老头不知道是哪里人</text>
        <!--    1：31-1：36-->
        <text>就是那老头救了我们</text>
        <!--   1：31-1：34-->
        <text>叫我们快跑,里面漏气</text>
        <!--  1：38-1：43-->
        <text>不然他自己早跑了</text>
        <!-- 1：55-1：59-->
        <text>要是我们跑得慢小命都没了</text>
        <!--   2：04-2：08-->
        <text>老人也在里面打工</text>
        <!--   2：10-2：13-->
        <text>五六十岁吧</text>
      </div>
    </div>
    <!-- 第二个光点的图片集合  mapindex==8  -->
    <div class="tuboxs"></div>
    <div class="popWindow" :class="{ show: showWindow, left: isLeft, right: !isLeft }">
      <div class="window">
        <!-- Content will be added here -->

      </div>
    </div>
  </div>
</template>

<script>
import MapBox from "@/components/mapBox/left.vue";

export default {
  components: {
    'map-box': MapBox
  },
  data() {
    return {
      oneyinp1: "",//第一光点 点了之后 就开始播放这个  这个播放结束之后 就播放oneyinp2
      oneyinp2: "",//oneyinp2 音频播放完了之后 显示详情图
      twoyinp1: "",//第一光点 点了之后 就开始播放这个  这个播放结束之后 就播放twoyinp2
      twoyinp2: "",//twoyinp2 音频播放完了之后 显示详情图
      showWindow: null,
      isLeft: null,
      mapindex: null
    }
  },
  methods: {
    handleMarkerClick(markerData) {

      if (markerData.id == 'marker_1751206154549') {
        this.mapindex = 7
      } else {
        this.mapindex = 8
      }
      console.log("收到子组件的marker点击事件:", markerData);
      this.isLeft = markerData.lng > 0 ? false : true;

      return
      console.log(markerData.id)
      this.showWindow = true;
    },

    closeWindow() {
      this.showWindow = false;
    }
  }
}
</script>

<style lang="less" scoped>
.tuimgs {

  position: absolute;
  display: block;
}

.tuboxs {}

.bagss {}

.wenzi {
  color: white;
}


.show {
  visibility: visible;
  opacity: 1;
}

.imgtuboxs {
  display: flex;
  justify-content: center;
  justify-items: center;
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(9, 9, 19, 0.5);
  backdrop-filter: blur(2px);
  z-index: 9;
  // visibility: hidden;
  opacity: 1;
  transition: all 0.3s;
}

.centerov {
  width: 80%;
  height: 80vh;
}

.tuboxs {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  // background: rgba(9, 9, 19, 0.5);
  // backdrop-filter: blur(2px);
  z-index: 9;
  visibility: hidden;
  opacity: 1;
  transition: all 0.3s;
}

.tuboxs.show {
  visibility: visible;
  opacity: 1;
}

.container {
  display: flex;
  justify-content: center;
  background: #080913;
  position: relative;
  height: 100vh;
  width: 100vw;
  align-items: center;
  overflow: hidden;
}

.topLine {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 3vh 6vw 1vh 6vw;
  font-size: 1vw;
  z-index: 999;
  background: #080913;

  .left {
    position: relative;
    z-index: 99999;

    a {
      color: #fff;
    }

    .navigator {
      position: absolute;
      left: 50%;
      top: 5vh;
      width: 4.5vw;
      transform: translateX(-50%);

      img {
        max-width: 100%;
      }
    }
  }
}

.mask {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(8, 9, 19, 0.4);
  backdrop-filter: blur(2px);
  z-index: 9;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;

  &.show {
    visibility: visible;
    opacity: 1;
  }
}

.popWindow {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;

  .window {
    position: absolute;
    pointer-events: all;
    width: 700px;
    left: 0;
    top: 0;
    z-index: 999;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    font-size: 0;
    left: 50%;
    transform: translateX(calc(-50% - 600px)) translateY(-50%);
    top: 50%;

    img {
      max-width: 100%;
    }
  }

  &.show {
    visibility: visible;
    opacity: 1;
  }

  &.right {
    transform: translateX(calc(50%));
  }
}
</style>